import React, { useEffect } from "react";
import { connect } from "react-redux";
import { Container } from "./RowSwiper.style"
import { useNavigate } from "react-router-dom"
import Swiper from 'swiper'
import 'swiper/css/swiper.min.css'

const RowSwiper = (props) => {
    const navigate = useNavigate()
    // 解构redux的状态
    const { homedata = [] } = props;
    // 解构父子之间传的id值
    const { id } = props;
    // 通过传入的变量拿到对象的属性，需要用到 [`${变量}`]来拿到
    const rotationItem = homedata[`${id}`] || [];
    // const rotationItem = homedata[id];/
    // console.log(homedata, id, rotationItem)
    // console.log(rotationItem);
    const { itemList = [] } = rotationItem;

    const goto = (prop) => {
        console.log(prop);
        navigate(`/home/${prop.id}`, { state: { datas: prop } });
    }
    useEffect(() => {
        setTimeout(() => {
            new Swiper('.swiper-container1', {
                pagination: '.swiper-pagination',
                slidesPerView: 2.5,
                paginationClickable: true,
                spaceBetween: 20

            });
        }, 100)
    }, [])

    return (

        <Container >
            <div className="containerbox">
                <div className="swiper-container swiper-container1">
                    <div className="swiper-wrapper">
                        {
                            itemList.map((item) => {
                                return (
                                    <div className="swiper-slide swiper-slide1" key={item.id} onClick={() => goto(item)} >
                                        <div className="ImagBox">
                                            <img src={item.picUrl} />
                                        </div>
                                        <div className="cardTitle">{item.title}</div>
                                        <div className="cardDesc">{item.desc}</div>
                                        <div className="cardPrice">￥{item.prc}</div>
                                    </div>
                                )

                            })
                        }
                    </div>
                </div>
            </div>
        </Container>

    )
}

const mapStateToPorps = (state) => {
    return {
        homedata: state.home.homedata
    }
}
const mapDispatchToProps = (dispatch) => {
    return {
        getMainDataDispatch() {
            dispatch(actionTypes.getHomeData())
        }
    }
}

export default connect(mapStateToPorps, mapDispatchToProps)(RowSwiper)
